import './App.css'
// 导入路由
import { Router, Route, Switch, Redirect } from 'react-router-dom'
import { customHistory } from './utils/history'
// 导入页面组件
import { Login } from '@/pages/Login/index.js'
import { Layouts } from '@/pages/Layout/index.js'
import { NotFound } from '@/pages/NotFound/index.js'

import { isAuth } from '@/utils'

function App() {
  return (
    <Router history={customHistory}>
      <div className={'app'}>
        <Switch>
          <Route exact path="/" render={() => <Redirect to="/home" />} />

          {/* 管理页面 */}
          {/* 原来的方式 */}
          {/* <Route path={'/home'} component={Layout} /> */}
          {/* 鉴权的方式，render 属性来实现 */}
          <Route
            path={'/home'}
            render={props => {
              // console.log('home 组件的 props=>', props)
              // 判断用户是否登录
              if (isAuth()) {
                return <Layouts />
              } else {
                console.log(123)
                return (
                  <Redirect
                    to={{
                      pathname: '/login',
                      state: {
                        from: props.location.pathname
                      }
                    }}
                  />
                )
              }
            }}
          />

          {/* 登录页面 */}
          <Route path="/login" render={() => <Login></Login>} />
          <Route render={() => <NotFound></NotFound>} />
        </Switch>
      </div>
    </Router>
  )
}

export default App
